<!--  -->
<template>
    <div :style="mycolor" class="myTag" :class="tagin ? '' : 'mb10'">
      <span  class="tag-text"  :class="tagin ? 'tagin' : ''">{{data.fullName || data.name}}</span><i v-if="closeShow" style="margin-left:9px"  @click="close"  class="el-icon-close"></i>
    </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({ name: 'Tag' })
export default class Tag extends Vue {
  @Prop({ default: { name: '', color: '#FFFFFF' } }) private data!: any
  @Prop({ default: true }) private closeShow!: boolean
  @Prop({ default: false }) private tagin!: boolean
  private close () {
    this.$emit('close', this.data._id)
  }

  get color () {
    return this.data.color || '#fff'
  }

  get mycolor () {
    if (!this.data.color || this.data.color === '#FFFFFF') {
      return 'color: #ccc;border: 1px solid #b3b9c7; background:#fff; line-height: 22px'
    } else {
      console.log(this.data.color)
      return 'color: #fff; background:' + this.data.color.slice(0, 7)
    }
  }
}
</script>
<style lang='stylus' scoped>
.myTag
  box-sizing border-box
  height 24px
  line-height 24px
  display inline-block
  border-radius 12px
  font-size 12px
  color #ccc
  padding 0 12px
  cursor pointer
  margin-left 10px
  background #ccc
  vertical-align middle
  white-space nowrap
  overflow hidden
.tag-text
  display inline-block
.tagin
  white-space nowrap
  text-overflow ellipsis
  max-width 100px
  overflow hidden
.mb10
  margin-bottom 10px
</style>
